React Native中的布局
使用width和heightreact native中width和height没有单位，表示的是与设备像素密度无关的逻辑像素点<View style={{width:100,height:100,backgroundColor: 'gray'}}> <Text style={{fontSize: 16}}>测试字体</Text></View>上面的width、height、fontSize在android中宽和高被解析成dp、字体被解析为sp；iOS上宽和高被解析为pt，虽然width和height...
2024-01-10
React-Native 遇到的坑
一、错误日志：Warning: Failed child context type: Invalid child context virtualizedCell.cellKey of type number supplied to CellRenderer, expected string.这个错误是在使用 RN官网推出最新的列表组件 FlatList 是出现的红色警告，出现这个错误可以正常运行，就是每次调试时看到它总觉得怪怪的，所以就查资料处理了，下面给出解决方...
2024-01-10
React Native 开发之IDE
个人暂时使用Atom和Nuclide，虽然有些不方便，不过喜欢界面以及安装简单哈哈，之后可能尝试下别的。译注：React Native官方更推荐使用WebStorm或Sublime Text来编写React Native应用。1. Atom和Nuclide1) Atom编辑器Atom是一个开源版本的编辑器，有着非常强大以及完美的体验，Atom最大的特色就是可以安装很多的插...
2024-01-10
React Native——组件的生命周期
组件生命周期上流程图描述了组件从创建、运行到销毁的整个过程，可以看到如果一个组件在被创建，从开始一直到运行会依次调用getDefaultProps到render这五个函数；在运行过程中，如果有属性和状态的改变，又会触...
2024-01-10
React Native声明属性和属性确认
属性声明因为用React Native创建的自定义组件可以复用, 我们开发过程中可能一个项目组有多个人同时开发,其他同事可能会用到我们自定义的组件, 但是他们使用的时候很容易忘记使用某些属性,这时候我们应该在自定义组件中声明一些属性。 //自定义组件export default class ConfirmDialog extends Component { //.......
2024-01-10
React Native滑出面板和滚动视图
我正在开发与本机反应的应用程序。我有一个UI元素，它与iOS中的Maps相似，在其中您可以从底部滑动面板，在面板内部有一个可滚动的列表。对于滑出式面板，我使用的组件称为rn-sliding-up-panel。它有几个道具可以作为事件监听器。例如<SlidingUpPanel allowDragging={/*Boolean*/} onDragStart={()=>{} /*When it is about...
2024-01-10
iOS原生项目中集成React Native
1.本文的前提条件是，电脑上已经安装了CocoaPods，React Native相关环境。2.使用Xcode新建一个工程。EmbedRNMeituan[图1]3.使用CocoaPods安装React Native在工程目录下新建Podfile文件，并配置需要使用的第三方库pod 'React', '0.13.0-rc' pod "React/RCTText" pod "React/RCTActionSheet" pod "React/RCTGeolocation" pod "React/RCTIm...
2024-01-10
React-Native 之 项目实战(一)
前言本文有配套视频，可以酌情观看。文中内容因各人理解不同，可能会有所偏差，欢迎朋友们联系我。文中所有内容仅供学习交流之用，不可用于商业用途，如因此引起的相关法律法规责任，与我无关。如文中内容对您造成不便，烦请联系 277511806@qq.com 处理，谢谢。转载麻烦注明出处，谢谢。...
2024-01-10
React Native之React速学教程
本文出自《React Native学习笔记》系列文章。React Native是基于React的，在开发React Native过程中少不了的需要用到React方面的知识。虽然官方也有相应的Document，但篇幅比较多，学起来比较枯燥。通过《React Native之React速学教程》你可以对React有更系统和更深入的认识。为了方便大家学习，我将《React Native之...
2024-01-10
React Native小白入门学习路径——三
迷茫，真的迷茫。 或许是自己努力的还不够吧，在学习的过程中遇到了很多问题，自己尝试借助搜索引擎解决问题，无奈国内的教程写的还很基础，涉及到稍微具体一点的问题时讲解就比较少更新也比较慢，绝大多数还是很早之前的版本下的处理方式。满满的还总结出一个结论，绝大多数讲入门的教...
2024-01-10
Windows搭建React Native环境
自己搭建了Rctive Native的环境，还是遇到了些问题，记录下。一、环境搭建1.下载安装JDKJDK的下载安装配置最好1.8版本的，我自己的电脑之前安装的是1.7的，在运行的过程中出现过问题。2.下载配置Android SDK因为我自己是做Android开发的，这些都已经下载好了，也可以去AndroidDevTools去下载（http://www.and...
2024-01-10
React-Native 原生 APP 更新
当一个 APP在运行的时候, 开发者想要将自己的代码更新到用户的手机上时, 一般都有两种方案, 一是热更新, 二就是 APP 更新.热更新暂且不说,这篇文章就讲讲 APP 如何更新App更新流程在 App 打开时请求接口或文件, 获取远程版本/版本更新说明/地址等等重用信息通过库或者原生方案, 获取 App 的当前版...
2024-01-10
React Native、Flutter 优劣势
React Native 框架的优势 React Native 框架的优势跨端方案的初衷是要解决多平台重复开发的问题，也就是说，使用跨端方案的话，多个平台的开发者可以使用相同的开发语言来开发适合不同系统的 App。React Native 使用 JavaScript 语言来开发，Flutter 使用的是 Dart 语言。这两门编程语言，对 iOS 开发者来说都...
2024-01-10
【React】如何调试React Native？
根据rn的教程中，我把远程的json换成本地的json，但仍然报错，没办法得知到底哪里不对了，目前只知道alert方法。。var REQUEST_URL = 'http://172.20.10.2:8000/rnDemo/movies.json';....componentDidMount: function() {this.fetchData();},fetchData: function() {fetch(REQUEST_URL).then((response) => response.json())....
2024-01-10
React Native(十四)——Slider
最近我们rn版的App快要内测了，小伙伴们都在积极的改bug，于是在其中就遇到了关于Slider的部分小知识，特地记录自己用到的部分属性，也许恰好会帮助到用到该组件的你：属性罗列（https://reactnative.cn/docs/0.51/slider.html#content）：View props… 继承View的所有属性；1.disabled:如果为true，用户就...
2024-01-10
Weex 和 React Native 的比较看这里
写在前面目前主流的应用大体分成三类：Native App, Web App, Hybrid App.Native App 特点:性能好完美的用户体验开发成本高，无法跨平台升级困难 (审核), 维护成本高Web App 特点:开发成本低, 更新快, 版本升级容易, 自动升级跨平台，Write Once , Run Anywhere无法调用系统级的 API临时入口，用户留存度低...
2024-01-10
React-native 关于键盘遮挡界面问题
//引入 KeyboardAvoidingView import { KeyboardAvoidingView } from 'react-native';//使用 KeyboardAvoidingView render(){ return <KeyboardAvoidingView behavior={'padding'} style={{flex: 1}}> {/*具体页面内容*/} </KeyboardAvoidingView>}//android 已经处理 其实只需要处理I...
2024-01-10
5 React State(状态)
React 把组件看成是一个状态机（State Machines) ,通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致.React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）(相当于用数据去驱动，而不用操作DOM)以下实例，创建一个名称扩展为 React.Component 的 ES6 类...
2024-01-10
React Native中ScrollView性能探究
1 基本使用ScrollView 是 React Native(后面简称：RN) 中最常见的组件之一。理解 ScrollView 的原理，有利于写出高性能的 RN 应用。ScrollView 的基本使用也非常简单，如下：<ScrollView> <Child1 /> <Child2 /> ... </ScrollView> 它和 View 组件一样，可以包含一个或者多个子组件。对子组件的布局可...
2024-01-10![[RN] <span style='color:red;'>React Native</span> 滚动跳转到指定位置](/wp-content/uploads/thumbs/536523_thumbnail.jpg)
[RN] React Native 滚动跳转到指定位置
React Native 滚动跳转到指定位置一、结构<ScrollView horizontal={true} ref={(view) => { this.myScrollView = view; }}> <View></View> ...<ScrollView>二、实现方法1）先给View增加一个onLayout属性<View onLayout={event=>{this.layoutX = event.nativeEvent.layout.x}}>2）然后通过下面这样就可以实现滚动到指定位置：...
2024-01-10
NiceFish-React
NiceFish-React首屏加载仅需663ms阅读页面（不需要登录访问权限）统计图表页面,采用UI指定颜色值使用轮询算法实现(需要登录访问权限)文章评论页面有过滤和排序功能这是我为NIceFish系列设计的登录效果图阅读详情页面(不需要登录访问权限)我的个人博客我参与的系列项目我的社交主页你好，我...
2024-01-10
React Native 混合编程 之与原生平台通信原理
一、组件和API API:(Application Programming Interface) 是指应用程序的接口，在React Native 平台上，API是一些预先定义并实现好的函数，基于React Native 平台的API，应用开发者通过调用这些接口就可以达到预期的目的，而无需了解React Native 内部工作的细节。组件:(Componet)是对数据和方法等简单封装，可以理解为...
2024-01-10React Native向特定的WhatsApp发送消息
我正在尝试从本机应用程序向WhatsApp联系人发送文本消息，我发现我可以通过链接来做到这一点Linking.openURL('whatsapp://send?text=hello');上面的代码仅打开whats应用程序，我需要打开一个具有特定号码的聊天记录，是否有我必须像文本一样发送的参数？回答：您可以使用它向特定号码发送消息：Linking.openUR...
2024-01-10
React-Native环境搭建（windows）
最近在研究reactNative开发，把环境搭建的过程给大家分享一下，RN环境的搭建真的是异常的困难啊如果需要运行react-native项目，首先必须具备的依赖环境有：1. Java Development Kit 1.8.x(更高版本暂不提供支持)2. Python 2.x(2.7)(3.x不提供支持)3. Node 8.3.x+（低版本不提供支持）4. Yarn5. react-native-cli6. Android Studio ...
2024-01-10
Flutter系列（二）——与React Native进行对比
Flutter系列（一）——详细介绍React NativeReact Native也是一种跨平台的开发模式，现在还有一些都在用，比如我了解的去哪儿，京东的部分事业群都在用React Native，我在之前的项目开发当中，也用过React Native。那么问题来了，和React Navtive相比，Flutter有哪些优势，又有哪些不足呢？其实这也是面试经常...
2024-01-10
